﻿.searchDivChange {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.form-padding {
    padding-left: 8px !important;
}

.profile-left-card {
    width: 100%;
    min-height: calc(100vh-10px);
}

.profile-title-container {
    padding: 5px 30px 0 30px;
}

.profile-title {
    font-size: 25px;
    font-weight: 700;
    text-align: center;
}

.profile-picture-container {
    height: 175px;
    margin-top: 30px;
}

.profile-picture {
    height: 170px;
    margin: 0 auto;
    display: block;
    width: 170px;
    object-fit: cover;
}

.client-code-ip-contianer {
    padding: 30px;
    background-color: azure;
}

    .client-code-ip-contianer p {
        font-size: 14px;
    }

    .client-code-ip-contianer span {
        font-size: 15px;
        font-weight: 700;
    }

    .client-code-ip-contianer span {
        font-size: 15px;
        font-weight: 700;
    }

.accordian-content {
    padding-top: 15px;
    padding-bottom: 15px;
}

    .accordian-content td {
        width: 50%;
    }

    .accordian-content .row {
        text-align: left;
    }

.accordian-row {
    margin-bottom: 30px;
}

    .accordian-row .card {
        margin-bottom: 0 !important;
    }


.profile-accordian-btn, .profile-accordian-btn:focus {
    background-color: #143652f0;
    color: #fff;
    transition: .3s ease;
    width: 100%;
}


    .profile-accordian-btn:hover {
        background-color: #fff;
        color: #143652f0;
    }

.profile-btn-title {
    font-size: 15px;
    text-align: left;
    padding-left: 5px;
}

.receipt-voucher-row {
    border-bottom: 2px solid #143652f0;
}

@media (min-width: 768px) {
    .receipt-voucher-row .col-sm-4:nth-child(2) {
        border-left: 2px solid #143652f0;
        border-right: 2px solid #143652f0;
    }
}

@media (max-width: 767px) {
    .receipt-voucher-row .col-sm-4:nth-child(2) {
        border-top: 2px solid #143652f0;
        border-bottom: 2px solid #143652f0;
    }
}


.bg-gray {
    background-color: #E9EDF0 !important;
}


.notification-dropdown {
    height: 250px;
    overflow-y: scroll;
}

.notice-dropdown {
    height: 250px;
    overflow-y: scroll;
}

.text-white {
    color: #fff !important;
}

.row-gap {
    margin-top: 20px;
}

.basic-company-title-container {
    background-color: #143652f0;
    color: #fff;
}

.sms-and-other-settings-container {
    background-color: #143652f0;
    color: #fff;
}



/*-----------------------------------------------------
    NEW CSS FOR ISP DIGITAL AFTER CONFLICT IN ALL CSS
-------------------------------------------------------*/

/*modal css*/
#modal-footer-customized {
    margin-right: 26px;
}

    #modal-footer-customized button {
        width: 20%;
    }

.delete-modal-footer-customized button:nth-child(2) {
    margin-right: 10px !important;
    width: 20%;
}

.delete-modal-footer-customized button:nth-child(1) {
    width: 20%;
}

#modal-footer-customized-extend {
    margin-right: 15px;
}

    #modal-footer-customized-extend button:nth-child(2) {
        margin-right: 10px !important;
        width: 20%;
    }

    #modal-footer-customized-extend button:nth-child(1) {
        width: 20%;
    }

/*#modal-footer-customized-others{
    margin-right: 15px;
}*/

#modal-footer-customized-others button:nth-child(1),
#modal-footer-customized-others button:nth-child(2) {
    width: 20%;
}

#bill-receive-footer-btn {
    margin-right: 10px;
}

    #bill-receive-footer-btn button {
        width: 20%;
    }

#edit-message i {
    top: 0 !important;
}

/*datatable css*/
.table.dataTable.hover tbody tr, table.dataTable.display tbody tr {
    transition: .3s ease !important;
}

    .table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
        background-color: #D7DFE4 !important;
    }

.client-profile-table tr:nth-child(2n+1) {
    background-color: #E9EDF0 !important;
}

/*all button css with hover*/
.color-primary {
    color: #165682;
}

.color-danger {
    color: #FF0000;
}

.color-success {
    color: #28A745;
}

.color-warning {
    color: #FFC107;
}

.color-info {
    color: #17A2B8;
}

.color-submit {
    color: #007BFF;
}

.color-view {
    color: #3498db;
}

.background-primary {
    background-color: #165682;
}

.background-danger {
    background-color: #FF0000;
}

.background-success {
    background-color: #28b463;
}

.background-info {
    background-color: #17A2B8;
}

.background-submit {
    background-color: #007BFF;
}

.background-warning {
    background-color: #f4d03f;
}

.background-white {
    background-color: #FFFFFF;
}

.background-light {
    background-color: #F8F9FA;
}

.background-dark {
    background-color: #17202a;
}

.background-grey {
    background-color: #566573;
}

.background-teal {
    background-color: #008081;
}

.background-purple {
    background-color: #7d3c98;
}

.background-view {
    background-color: #3498db;
}

.action-btn-bg-delete {
    background-color: transparent;
    color: #f50707;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-reject {
    background-color: transparent;
    color: #8B0000;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-print {
    background-color: transparent;
    color: #7d3c98;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-notice {
    background-color: transparent;
    color: #f4d03f;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-view {
    background-color: transparent;
    color: #3498db;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-edit {
    background-color: transparent;
    color: #08AA17;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-sync {
    background-color: transparent;
    color: #0177E5;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-mac-sync {
    background-color: transparent;
    color: #663398;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-sms {
    background-color: transparent;
    color: #2ecc71;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-backup {
    background-color: transparent;
    color: #2ecc71;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-key {
    background-color: transparent;
    color: #34495e;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-dataview {
    background-color: transparent;
    color: #16a085;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-confirmnewtask {
    background-color: transparent;
    color: #8D6E63;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-green {
    background-color: transparent;
    color: #2ecc71;
    padding: 8px;
    border-radius: 3px;
    margin: 2px;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.action-btn-bg-confirmnewtask:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-delete:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-notice:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-print:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-view:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-edit:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-sms:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-backup:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-key:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-dataview:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-green:hover {
    background-color: #fff;
    border-radius: 50%;
}

.action-btn-bg-delete img, .action-btn-bg-edit img,
.action-btn-bg-print img, .action-btn-bg-sms img,
.action-btn-bg-view img {
    height: 20px;
    width: 20px;
}

.pointer {
    cursor: pointer;
}

.btn-waring {
    color: #fff !important;
    background-color: #f88e49;
    border-color: #FFC107;
    padding: 6px;
    margin: 2px;
    border-radius: 3px;
}

.btn-duration-calculation {
    color: #008080 !important;
    padding: 6px;
    margin: 2px;
    width: 95% !important;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
}

/*.btn-duration-calculation {
    color: #fff !important;
    background-color: #008080 !important;
    border-color: #008080 !important;
    padding: 6px;
    margin: 2px;
    border-radius: 10px;
    width: 95% !important;
    display: inline-block;
}*/

    /*.btn-duration-calculation:hover {
        color: #008080 !important;
        background-color: #fff !important;
        border-color: #008080 !important;
        padding: 6px;
        margin: 2px;
        border-radius: 10px;
        width: 95% !important;
        display: inline-block;
    }*/

.btn-due {
    color: #fff !important;
    background-color: #dc3545;
    border-color: #dc3545;
    padding: 6px;
    margin: 2px;
    border-radius: 3px;
}

.btn-pay {
    color: #fff !important;
    background-color: #686868;
    border-color: #686868;
    padding: 6px;
    margin: 2px;
    border-radius: 3px;
}

.paid-btn {
    padding: 6px;
    border-radius: 3px;
}

.btn-back button {
    width: 100%;
    border: none;
    height: 34px;
    border-radius: 4px;
    background-color: #0F455D;
    color: #fff;
}

.btn-employee-assign {
    background-color: #4CC7EC;
    margin-top: 4px;
    color: #fff;
}

.billedit_addCustomer {
    margin-top: 30px;
}

    .billedit_addCustomer button {
        margin-left: -22px;
        border-radius: 5px;
        color: #08AA17;
    }

.client-disconnected-status {
    padding: 6px;
    border-radius: 5px;
    background-color: #848282 !important;
}

.client-connected-status {
    padding: 6px;
    border-radius: 5px;
    background-color: #46BB47 !important;
}

/*Page various Gap*/
.bottom-gap {
    margin-bottom: 100px;
}

.bottom-gap-200px {
    margin-bottom: 200px;
}

.cardinside_bottom_gap {
    margin-bottom: 15px;
}

.card-top-header {
    height: 62px;
}

.header-gap {
    margin-bottom: 20px;
}

.header-gap-15px {
    margin-bottom: 15px;
}

.header-gap-10px {
    margin-bottom: 10px;
}

/*Sync button css and media query*/
@media (min-width: 320px) and (max-width: 380px) {
    .Report-btn {
        float: left !important;
    }

    .sync {
        float: left !important;
    }
}

.Report-btn {
    margin: 15px 0px 15px 10px;
    float: right;
}

/*.Report-btn button i {
        font-size: 18px !important;
        top: 2px !important;
    }*/

.sync {
    display: inline-flex;
    margin: 15px;
    float: right;
}

.sync-text {
    display: inline-flex;
}

    .sync-text button i {
        /*top: -5px !important;*/
    }

.sync-ico {
    margin: 5px 0px 0px 15px;
}

/*password field css in all page*/
.password-field {
    border: none;
    background-color: transparent;
}

/*error message css for all*/
#RequiredErrorMSG {
    background-color: red;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#RequiredorFailedErrorMSG {
    background-color: red;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#ErrorNotificationMSG {
    background-color: red;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#DeleteSuccessMSG {
    background-color: #009933;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#SuccessMSG {
    background-color: #009933;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

#WarningErrorMSG {
    background-color: #FFBD33;
    color: #000;
    padding: 10px;
    border-radius: 5px;
}

#AddEditSuccessMSG {
    background-color: #009933;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

.alert-dismissable .close, .alert-dismissible .close {
    right: 0px !important;
    color: none;
}

/*Invoice setting css*/
.invoice-basic-info {
    padding: 20px;
    border: 2px solid #1F91F3;
    border-radius: 5px;
    margin-bottom: 30px;
}

.invoice-note {
    padding: 20px;
    border: 2px solid #1F91F3;
    border-radius: 5px;
    margin-bottom: 30px;
}

.invoice-word-position {
    padding: 20px;
    border: 2px solid #1F91F3;
    border-radius: 5px;
    margin-bottom: 30px;
}

.invoicetitle-visibility {
    padding: 20px;
    border: 2px solid #1F91F3;
    border-radius: 5px;
    margin-bottom: 15px;
}

.invoice-upload-logo {
    padding: 20px;
    border: 2px solid #1F91F3;
    border-radius: 5px;
    margin-bottom: 15px;
}

.invoicesetting-waring-info h4 {
    margin: 18px 15px 0px 0px;
}

.btn-topbar-remove-color {
    background-color: red !important;
    color: #fff !important;
    transition: .3s ease;
}

    .btn-topbar-remove-color:hover, .btn-topbar-remove-color:active, btn-topbar-remove-color:focus, btn-topbar-remove-color:visited {
        background-color: #fff !important;
        color: #143652f0 !important;
    }

    .btn-topbar-remove-color i {
        top: 2px;
    }

.btn-topbar-color {
    background-color: #143652f0 !important;
    color: #fff !important;
    transition: .3s ease;
    /*border: 1px solid #143652f0 !important;*/
}

    .btn-topbar-color:hover, .btn-topbar-color:active, btn-topbar-color:focus, btn-topbar-color:visited {
        background-color: #fff !important;
        color: #143652f0 !important;
        border-color: #143652f0;
    }

    .btn-topbar-color i {
        /*top: 2px;*/
    }

.total-mikrotik-container {
    padding: 15px;
}

.total-mikrotik-client {
    margin-top: 0;
}

.last-ping-result-container {
    padding: 10px;
}

.macMenu-table tbody tr td:last-child {
    display: flex;
}


/*--------------Employee Dashboard-------------*/

/*.employee-dash-miniCard{
    height: 100px;
}*/

.employee-profile-sec {
    height: 445px;
}

.salary-sheet-sec {
    height: 445px;
}

.salary-title-container {
    padding: 5px 30px 0 30px;
}

.salary-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.salary-sheet-table-container {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
}

.zone-problem-sec {
    height: 365px;
}

.zone-problem-title-container {
    padding: 5px 30px 0 30px;
}

.zone-problem-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.zone-navtabs-container {
    margin-left: 15px;
    margin-right: 15px;
}

.zone-tabs {
    width: 250px;
    margin: 0 auto;
}

.most-problem-sec {
    height: 365px;
}

.most-problem-title-container {
    padding: 5px 30px 0 30px;
}

.most-problem-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.most-navtabs-container {
    margin-left: 15px;
    margin-right: 15px;
}

.most-tabs {
    width: 250px;
    margin: 0 auto;
}

.monthly-problem-sec {
    height: 365px;
}

.monthly-problem-title-container {
    padding: 5px 30px 0 30px;
}

.monthly-problem-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.monthly-navtabs-container {
    margin-left: 15px;
    margin-right: 15px;
}

.monthly-tabs {
    width: 250px;
    margin: 0 auto;
}

.employee-modalbody-delete {
    padding: 15px 40px !important;
}

.new-rt {
    height: 150px !important;
    padding: 15px !important;
}

.profile-dropdown {
    padding: 10px !important;
}

.badge-success {
    background-color: #468847;
}

.btn-update-company-settings {
    color: #fff;
    background-color: #143652f0 !important;
    transition: .3s ease;
}

.disabler {
    pointer-events: none;
}


.search-section-row {
    margin: 10px 0 10px 0;
}

    .search-section-row h4 {
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

.search-title-section {
    background: #143652f0 !important;
    color: #fff;
    border-radius: 5px;
}

.details-goToList-btn {
    width: 100%;
}

@media (min-width: 1280px) and (max-width: 1280px) {
    .subzone-container label {
        font-size: 10px !important;
    }

    .subzone-container .spn-btn-design {
        font-size: 8px !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .subzone-container label {
        font-size: 10px !important;
    }

    .subzone-container .spn-btn-design {
        font-size: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 800px) {

    .zone-container label {
        font-size: 10px !important;
    }

    .zone-container .spn-btn-design {
        font-size: 8px !important;
    }

    .subzone-container label {
        font-size: 10px !important;
    }

    .subzone-container .spn-btn-design {
        font-size: 8px !important;
    }

    .client-type-container label {
        font-size: 10px !important;
    }

    .client-type-container.spn-btn-design {
        font-size: 8px !important;
    }
}


/*checkbox*/

.New-check-box-container .box {
    margin: -3px;
    color: #aaa;
    float: left;
    position: relative;
}


    .New-check-box-container .box:before {
        content: "";
        height: 66px;
        width: 66px;
        position: absolute;
        border-radius: 6px;
    }

    .New-check-box-container .box input[type="radio"] + span,
    .box input[type="checkbox"] + span {
        padding: 0 0 0 50px;
    }

        .New-check-box-container .box input[type="radio"] + span:before,
        .New-check-box-container .box input[type="checkbox"] + span:before {
            content: "";
            position: absolute;
            top: 75%;
            left: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 30px;
            height: 30px;
            margin-top: -25px;
            background: #e5e1d8;
            background: -webkit-linear-gradient(#f5f5f5, #ddd);
            background: -moz-linear-gradient(#f5f5f5, #ddd);
            background: linear-gradient(#f5f5f5, #ddd);
            box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
            -webkit-transition: all .5s;
            transition: all .5s;
        }

    .New-check-box-container .box input[type="checkbox"] + span:before {
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .New-check-box-container .box input[type="checkbox"]:checked + span {
        color: #000;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

        .New-check-box-container .box input[type="checkbox"]:checked + span:after {
            content: "";
            position: absolute;
            top: 70%;
            margin-top: -15px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
        }

        .New-check-box-container .box input[type="checkbox"]:checked + span:after {
            left: 6px;
            width: 20px;
            height: 10px;
            border-left: 5px solid #143652f0;
            border-bottom: 4px solid #143652f0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }



.New-check-box-container span {
    font-size: 25px;
}


.New-mini-check-Box-container input[type="radio"] + span:before, .box input[type="checkbox"] + span:before {
    content: "";
    position: absolute;
    top: 75%;
    left: 10%;
    width: 20px;
    height: 20px;
    margin-top: -25px;
}


/*.New-mini-check-Box-container  input[type="checkbox"]:checked + span:after {
    left: 8px !important;
    width: 15px !important;
    height: 8px !important;
}*/


.New-mini-check-Box-container input[type="checkbox"]:checked + span:after {
    margin-top: -17px;
}




.New-mini-check-Box-container .box {
    margin: -3px;
    color: #aaa;
    float: left;
    position: relative;
}


    .New-mini-check-Box-container .box:before {
        content: "";
        height: 66px;
        width: 66px;
        position: absolute;
        border-radius: 6px;
    }

    .New-mini-check-Box-container .box input[type="radio"] + span,
    .box input[type="checkbox"] + span {
        padding: 0 0 0 50px;
    }

        .New-mini-check-Box-container .box input[type="radio"] + span:before,
        .New-mini-check-Box-container .box input[type="checkbox"] + span:before {
            content: "";
            position: absolute;
            top: 75%;
            left: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            width: 20px;
            height: 20px;
            margin-top: -20px;
            margin-left: 15px;
            background: #e5e1d8;
            background: -webkit-linear-gradient(#f5f5f5, #ddd);
            background: -moz-linear-gradient(#f5f5f5, #ddd);
            background: linear-gradient(#f5f5f5, #ddd);
            box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
            -webkit-transition: all .5s;
            transition: all .5s;
        }

    .New-mini-check-Box-container .box input[type="checkbox"] + span:before {
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .New-mini-check-Box-container .box input[type="checkbox"]:checked + span {
        color: #000;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

        .New-mini-check-Box-container .box input[type="checkbox"]:checked + span:after {
            content: "";
            position: absolute;
            top: 70%;
            margin-top: -13px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
        }

        .New-mini-check-Box-container .box input[type="checkbox"]:checked + span:after {
            left: 18px;
            width: 16px;
            height: 8px;
            border-left: 5px solid #143652f0;
            border-bottom: 4px solid #143652f0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }


/* media query for checkbox*/

@media (min-width: 1920px) and (max-width: 1920px) {
    .New-mini-check-Box-container .box input[type="radio"] + span:before,
    .New-mini-check-Box-container .box input[type="checkbox"] + span:before {
        left: 15px;
    }


    .New-mini-check-Box-container .box input[type="checkbox"]:checked + span::after {
        left: 32px;
        top: 69%;
    }
}

.icon-gap {
    margin-right: 5px;
}

.screen-disable {
    pointer-events: none;
    cursor: progress;
}

.font-weight-bold{
    font-weight:bold;
}

/*Start: for group action menus*/
.bar {
    position: relative;
}

    .bar .notif {
        display: inline;
        -webkit-animation: insta 0.8s ease-in-out forwards;
        animation: insta 0.8s ease-in-out forwards;
        -webkit-transform-origin: center 60px;
        transform-origin: center 60px;
    }

.notif {
    background: #22425c;
    position: absolute;
    border-radius: 7px;
    right: 85%;
    top: 2%;
    padding: 0px 0px 0px 8px;
}

    .notif:after {
        content: "";
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid #22425c;
        position: absolute;
        right: -15px;
        transform: rotate(-90deg);
        top: 38%;
    }

    .notif i {
        color: #fff;
        padding: 10px;
    }
/*End: for group action menus*/

/*Start: action menus icon style*/
.custom-view-btn-bg {
    background-color: transparent;
    color: #3498db;
    margin: 0px 0px 0px -5px;
}

.custom-edit-btn-bg {
    background-color: transparent;
    color: #08AA17;
    margin: 0px 0px 0px -5px;
}

.custom-msg-btn-bg {
    background-color: transparent;
    color: #2ecc71;
    margin: 0px 0px 0px -5px;
}

.custom-info-btn-bg {
    background-color: transparent;
    color: #16a085;
    margin: 0px 0px 0px -5px;
}

.custom-delete-btn-bg {
    background-color: transparent;
    color: #f50707;
    margin: 0px 0px 0px -5px;
}

.custom-pac-schedule-btn-bg {
    background-color: transparent;
    color: #337ab7;
    margin: 0px 0px 0px -5px;
}

.custom-status-schedule-btn-bg {
    background-color: transparent;
    color: #269abc;
    margin: 0px 0px 0px -5px;
}
/*End: action menus icon style*/